<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
	margin: 0;
	padding: 0;
}
body{
	background: greenyellow;
}
.menu{
	width: 200px;
	height: auto;
	background: #00FFFF;
	margin: 100px auto;
}
.item{
	width: 100%;
	height: auto;
	background: #CCCCCC;
}
h3{
	background: #00FFFF;
	font-size: 24px;
	padding: 5px;
	text-align: center;
}
.itemBox{
	width: 100%;
	height: 0px;
	overflow: hidden;
	border-bottom: 1px solid antiquewhite;
	transition-property: height;
	transition-duration: 1s;
}
.itemBox > ul > li{
	padding: 5px;
	list-style: none;
}
.item:hover > .itemBox{
	cursor: pointer;
	height: 150px;
}

    </style>
</head>
<body>
    <div class="menu">
		<div class="item">
			<h3>市内新闻</h3>
			<div class="itemBox">
				<ul>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
				</ul>
			</div>
		</div>
		<div class="item">
			<h3>省内新闻</h3>
			<div class="itemBox">
				<ul>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
				</ul>
			</div>
		</div>
		<div class="item">
			<h3>国内新闻</h3>
			<div class="itemBox">
				<ul>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
				</ul>
			</div>
		</div>
		<div class="item">
			<h3>国际新闻</h3>
			<div class="itemBox">
				<ul>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
					<li>bilibili是国内知名的视频弹幕网站</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>